<template>
  <el-dialog
    width="700px"
    :title="$t('创建货架')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel">
    <el-form :model="form" :rules="rules" ref="elForm">
      <el-form-item prop="storageAreaName" :label="$t('货架名')" label-width="80px">
        <el-input v-model="form.storageAreaName" />
      </el-form-item>

      <div style="display: flex; align-items: center; justify-content: center">
        <el-form-item :label="$t('输入列数')" prop="slotColumn" label-width="80px">
          <el-input-number v-model="form.slotColumn" controls-position="right" :min="1" :max="20" />
        </el-form-item>
      </div>

      <div style="display: flex">
        <div style="display: flex; align-items: center; justify-content: center">
          <el-form-item :label="$t('输入层数')" prop="slotLayer" style="margin-bottom: 0">
            <el-input-number
              style="width: 90%"
              v-model="form.slotLayer"
              controls-position="right"
              :min="1"
              :max="10" />
          </el-form-item>
        </div>
        <div class="example" style="flex: 1">
          <div
            v-for="(_, index) in [
              ['1-1', '1-2', '1-3', '1-4'],
              ['2-1', '2-2', '2-3', '2-4'],
              ['3-1', '3-2', '3-3', '3-4'],
            ].reverse()"
            class="example-wrapper">
            <div v-for="item in _" class="example-wrapper-item">{{ item }}</div>
          </div>
        </div>
      </div>

      <el-form-item> </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
      <el-button @click="handleSubmit" type="primary">{{ $t('创建') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createStorageArea } from '@/api/distribution/sku/storageArea'

export default {
  props: {
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      form: {
        storageAreaName: '',
        slotLayer: '',
        slotColumn: '',
      },
      rules: {
        storageAreaName: [{ required: true, message: this.$t('请输入'), trigger: 'blur' }],
        slotLayer: [{ required: true, message: this.$t('请输入'), trigger: 'blur' }],
        slotColumn: [{ required: true, message: this.$t('请输入'), trigger: 'blur' }],
      },
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        Object.keys(this.form).forEach((key) => {
          this.form[key] = null
        })
      }
    },
  },
  methods: {
    handleSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.$confirm(this.$t('确认创建?'), this.$t('提示'), {
            type: 'warning',
          }).then(() => {
            createStorageArea(this.form).then((res) => {
              const { code, data, msg } = res
              if (code === 200) {
                this.$message({ type: 'success', message: msg })
                this.$emit('getListByCreate', this.form.storageAreaName)
                this.cancel()
              }
            })
          })
        }
      })
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
.example {
  display: flex;
  flex-direction: column;
  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    &-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border: 1px solid #cccc;
      height: 50px;
    }
  }
}
</style>
